<!DOCTYPE html>
<html lang="zh-CN">
<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>detail</title>
<style>
/* 重置所有元素的默认外边距和内边距，以及设置盒模型为border-box */
* {
    margin: 0; /* 所有元素的外边距设置为0 */
    padding: 0; /* 所有元素的内边距设置为0 */
    box-sizing: border-box; /* 盒模型设置为border-box，即宽度和高度包括padding和border */
}

/* 设置整个页面的字体、行高和背景颜色 */
body {
    font-family: Arial, sans-serif; /* 页面字体设置为Arial，如果没有则使用无衬线字体 */
    line-height: 1.6; /* 行高设置为字体大小的1.6倍，增加可读性 */
    background-color: #f4f4f4; /* 页面背景颜色设置为浅灰色 */
}

/* 容器类，用于限制页面内容的宽度，并使其水平居中 */
.container {
    width: 80%; /* 容器宽度设置为父元素宽度的80% */
    margin: 0 auto; /* 上下外边距设置为0，左右外边距自动，实现水平居中 */
    max-width: 1200px; /* 容器最大宽度限制为1200px，防止过宽 */
}

/* 头部样式，设置背景颜色、文字颜色和内边距 */
header {
    background: #333; /* 头部背景颜色设置为深灰色 */
    color: #fff; /* 头部文字颜色设置为白色 */
    padding: 1rem 0; /* 上下内边距设置为1rem，左右内边距为0 */
}

/* 头部标题样式，使其居中显示 */
header h1 {
    text-align: center; /* 文字居中显示 */
}

/* 导航栏样式，去除列表样式，使其水平居中显示 */
nav ul {
    list-style: none; /* 去除列表项的默认标记 */
    display: flex; /* 设置为弹性盒子布局 */
    justify-content: center; /* 子项水平居中 */
}

/* 导航栏列表项样式，设置左右外边距 */
nav ul li {
    margin: 0 1rem; /* 左右外边距设置为1rem */
}

/* 导航栏链接样式，设置文字颜色和去除下划线 */
nav ul li a {
    color: #fff; /* 链接文字颜色设置为白色 */
    text-decoration: none; /* 去除链接的下划线 */
}

/* 英雄区域样式，设置背景图片、高度、水平和垂直居中 */
.hero {
    background: url('path/to/hero-image.jpg') no-repeat center center/cover; /* 背景图片设置为指定路径，不重复，居中显示，覆盖整个区域 */
    height: 400px; /* 高度设置为400px */
    display: flex; /* 设置为弹性盒子布局 */
    align-items: center; /* 子项垂直居中 */
    justify-content: center; /* 子项水平居中 */
    color: #fff; /* 文字颜色设置为白色 */
    text-align: center; /* 文字居中显示 */
}

/* 英雄区域标题样式，设置字体大小和外边距 */
.hero h2 {
    font-size: 2.5rem; /* 字体大小设置为2.5rem */
    margin-bottom: 1rem; /* 下外边距设置为1rem */
    color: #333; /* 文字颜色设置为深灰色 */
}

/* 英雄区域段落样式，设置字体大小和外边距 */
.hero p {
    font-size: 1.2rem; /* 字体大小设置为1.2rem */
    margin-bottom: 2rem; /* 下外边距设置为2rem */
    color: #333; /* 文字颜色设置为深灰色 */
}

/* 英雄区域按钮样式，设置背景颜色、文字颜色、内边距、字体大小和鼠标指针样式 */
.hero button {
    background: #ff6347; /* 背景颜色设置为番茄色 */
    color: #fff; /* 文字颜色设置为白色 */
    border: none; /* 去除边框 */
    padding: 0.75rem 1.5rem; /* 上下内边距设置为0.75rem，左右内边距设置为1.5rem */
    font-size: 1rem; /* 字体大小设置为1rem */
    cursor: pointer; /* 鼠标指针设置为手型，表示可点击 */
}

/* 车辆列表区域样式，设置内边距和外边距 */
.cars {
    padding: 2rem 0; /* 上下内边距设置为2rem，左右内边距为0 */
    margin: 4px; /* 外边距设置为4px */
    position: relative; /* 定位设置为相对定位 */
}

/* 车辆列表标题样式，使其居中显示并设置外边距 */
.cars h2 {
    text-align: center; /* 文字居中显示 */
    margin-bottom: 2rem; /* 下外边距设置为2rem */
}

/* 车辆列表样式，设置为弹性盒子布局，使其水平分布并允许换行 */
.car-list {
    display: flex; /* 设置为弹性盒子布局 */
    justify-content: space-around; /* 子项平均分布，且两边留有空白 */
    flex-wrap: wrap; /* 允许子项换行 */
}

/* 单个车辆项样式，设置背景颜色、边框、内边距、外边距和宽度 */
.car-item {
    background: #fff; /* 背景颜色设置为白色 */
    border: 1px solid #ddd; /* 边框设置为1px实线，颜色为浅灰色 */
    padding: 1rem; /* 内边距设置为1rem */
    margin: 1rem; /* 外边距设置为1rem */
    width: 300px; /* 宽度设置为300px */
    text-align: center; /* 文字居中显示 */
}

/* 车辆项图片样式，设置宽度、高度和图片填充方式 */
.car-item img {
    width: 250px; /* 宽度设置为250px */
    height: 150px; /* 高度设置为150px */
    object-fit: cover; /* 图片填充方式设置为cover，保持图片比例，裁剪超出部分 */
}

/* 页脚样式，设置背景颜色、文字颜色、文本对齐和内边距 */
footer {
    background: #333; /* 背景颜色设置为深灰色 */
    color: #fff; /* 文字颜色设置为白色 */
    text-align: center; /* 文字居中显示 */
    padding: 1rem 0; /* 上下内边距设置为1rem，左右内边距为0 */
}
</style>
</head>
<body background="./img/background.jfif">
    <header>
        <div class="container">
            <h1>懂车帝售车网站</h1>
            <nav>
                <ul>
                    <li><a href="INDEX.html">首页</a></li>
                    <li><a href="./select.HTML">车型</a></li>
                    <li><a href="#">新闻</a></li>
                    <li><a href="#">关于我们</a></li>
                </ul>
            </nav>
        </div>
    </header>

    <main>
        <section class="hero">
            <div class="container">
                <h2 >欢迎来到懂车帝售车网站</h2>
                <p>为您提供最新、最全面的汽车信息和销售服务。</p>
                <a href="INDEX.html"><button>了解更多</button></a>
            </div>
        </section>

        <section class="cars">
            <div class="container">
                <h2>热门车型</h2>
                <div class="car-list">
                    <div class="car-item">
                        <a href="three.html">
                        <img src="./img/wild horse.jfif" >
                        </a>
                        <h3>野马</h3>
                        <p>价格：150,000元</p>
                        
                    </div>
                    <div class="car-item">
                        <a href="./two.html">
                        <img src="./img/camaro.jpg" >
                        </a>
                        <h3>科迈罗</h3>
                        <p>价格：200,000元</p>
                    
                    </div>
                    <div class="car-item">
                       <a href="./one.html">
                        <img src="./img/dodge.jpg">
                        </a> 
                        <h3>道奇地狱猫</h3>
                        <p>价格：800,000元</p>
                    </div>
                </div>
            </div>
        </section>
    </main>

    <footer>
        <div class="container">
            <p>&copy; 2024 懂车帝售车网站. All rights reserved.</p>
        </div>
    </footer>
</body>
</html>
